@extends('layouts.mobile_main')

@section('title', '地图')

@section('resources')
    @parent
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css?v={{env('CSS_VERSION')}}"/>
    <script src="{{ env('JS_DOMAIN') }}js/adaptation.js?v={{env('IMAGE_VERSION')}}"></script>
    <style>
        .amap-controls,.amap-logo,.amap-copyright{
            display: none!important;
        }
        .map_head{position: relative;z-index: 100;width: 100%;overflow: hidden;}
        .map_head a{width: 0.6rem;height: 0.6rem;float: left;margin: 0.5rem 0 0 0.6rem;}
        .map_head a img{width: 0.6rem;height: 0.6rem;float: left;}
        .local_map{font-size: 0.48rem;float: right;width: 3rem;height: 1rem;border: 1px solid #808080;border-radius: 0.2rem;line-height: 1rem;text-align: center;margin: 0.5rem 0.6rem 0 0;}
        .map_foot{width: 100%;height: 2rem;border-top: 1px solid #9a54c6;position: fixed;bottom: 0;left: 0;z-index: 100;background: #fff;}
        #tip{border: none;padding: 0;margin: 0;position: absolute;left: 0.6rem;top: 0rem;}
        #tip p{line-height: 0.44rem;}
        #tip h3{font-size: 0.44rem;}
        #result{width: 7rem;display: inline-block;}
    </style>
@endsection

@section('content')
<body onload="geocoder()">
<div id="container"></div>
<header class="map_head">
	<a class="fl" href="javascript:history.go(-1);">
	    <img class="fl" src="{{env('IMAGE_DOMAIN')}}images/map_back.png?v={{env('IMAGE_VERSION')}}" alt="">
	 </a>
	<!-- <span class="local_map">本机地图导航</span> -->
</header>
<footer class="map_foot">
	<div id="tip">
		<h3>{{$name}}</h3>
		<p>
			<span style="font-size: 0.36rem;">地址：{{$address}}</span>
			<!-- <span id="result"></span> -->
			@if(isset($distance))
			<span style="float: right;margin-right: 0.6rem;"><{{$distance}}</span>
			@endif
		</p>
	</div>
</footer>

@endsection

@section("scriptResources")
    @parent
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=a9fe1b184bacd00ecd70365903024419&plugin=AMap.Geocoder"></script>
    <script type="text/javascript">
        var map = new AMap.Map("container", {
            resizeEnable: true
        });
        var address="{{$address}}";
        function geocoder() {
            var geocoder = new AMap.Geocoder({
                city: "000", //城市，默认：“全国”
                radius: 1000 //范围，默认：500
            });
            //地理编码,返回地理编码结果
            geocoder.getLocation(address, function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    geocoder_CallBack(result);
                }
            });
        }
        function addMarker(i, d) {
            var marker = new AMap.Marker({
                map: map,
                position: [ d.location.getLng(),  d.location.getLat()]
            });
            var infoWindow = new AMap.InfoWindow({
                content: d.formattedAddress,
                // offset: {x: 0, y: -30}
            });
            marker.on("mouseover", function(e) {
                infoWindow.open(map, marker.getPosition());
            });
        }
        //地理编码返回结果展示
        function geocoder_CallBack(data) {
            var resultStr = "";
            //地理编码结果数组
            var geocode = data.geocodes;
            for (var i = 0; i < geocode.length; i++) {
                //拼接输出html
                resultStr += "<span style=\"font-size: 12px;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\">" + "<b>地址</b>：" + geocode[i].formattedAddress + "" + "&nbsp;&nbsp;<b>&nbsp;&nbsp;&nbsp;&nbsp;坐标</b>：" + geocode[i].location.getLng() + ", " + geocode[i].location.getLat() + "" + "<b>&nbsp;&nbsp;&nbsp;&nbsp;匹配级别</b>：" + geocode[i].level + "</span>";
                addMarker(i, geocode[i]);
            }
            map.setFitView();
            // document.getElementById("result").innerHTML = resultStr;
        }



        // lnglatXY = [115.795421, 28.656445]; //已知点坐标
        // function geocoder() {  //逆地理编码
        //     var geocoder = new AMap.Geocoder({
        //         radius: 1000,
        //         extensions: "all",
        //         zoom:15
        //     });
        //     geocoder.getAddress(lnglatXY, function(status, result) {
        //         if (status === 'complete' && result.info === 'OK') {
        //             geocoder_CallBack(result);
        //         }else{
        //             alert(status)
        //         }
        //     });
        //     var marker = new AMap.Marker({  //加点
        //         map: map,
        //         position: lnglatXY
        //     });
        //     map.setFitView();
        // }
        // function geocoder_CallBack(data) {
        //     var address = data.regeocode.formattedAddress; //返回地址描述
        //     // document.getElementById("result").innerHTML = address;
        // }
    </script>
@endsection